<template>
  <div>
    <vo-table ref="yuTable" :data="data.tableData">

      <template #tableForm>
          <tiny-form :model="data.formData" :rules="data.rules"  :inline="true"  style="height: 40px;" label-width="100px"  ref="formRef">
            <tiny-form-item label="查询信息" >
            <tiny-input v-model="data.info" placeholder="请输入表名"></tiny-input>
            </tiny-form-item>
            <tiny-form-item >
            <tiny-button  size="small"  type="info" @click="query"  ><vo-icon iconName="sousuo"/>搜索</tiny-button>

            </tiny-form-item>
        </tiny-form>
      </template>


      <template #leftBar>
        <tiny-button-group class="ml-4">
          <tiny-button type="primary" @click="addBtn">新增</tiny-button>
          <tiny-button type="primary" @click="delBatch">删除</tiny-button>
        </tiny-button-group>
      </template>
      <template v-slot:handleSlot="{row}">
        <template v-if="row.status === 0">
          <el-button-group class="ml-4" style="display: inline-flex">
            <el-button text type="success" size="small" @click="editRow(row)">创建 </el-button>
            <el-button text size="small" type="danger" @click="showDetail(row)">移除 </el-button>
          </el-button-group>
        </template>
        <template v-else>
          <tiny-button size="mini" @click="row.editing = true"> 编辑 </tiny-button>
        </template>
      </template>
    </vo-table>
  </div>
</template>

<script setup>
  import {ref, reactive, toRefs, onBeforeMount, getCurrentInstance} from 'vue';
  let {proxy} = getCurrentInstance();
  const yuTable = ref(null);
  const data = reactive({
    info: '', //搜索信息
    tableData: {data: [], cols: [], tableArrts: {haspage: true}},
    tableDataEdit: {isShow: false, dialogConfig: {title: ''}},
    TableDataShow: {data: {}, isShow: false, dialogConfig: {title: ''}},
    editData: {},
  });
  const query = async () => {
    data.tableData.data = await proxy.$api.system.querySysMqConfig({info: data.info});
  };
  const delBatch = () => {
    console.log(yuTable.value.grid().getSelectRecords(true));
  };
  const addBtn = () => {
    yuTable.value.grid().insert({});
  };
  data.tableData.cols = [
    {type: 'index'},
    {type: 'selection'},
    {title: '交换机名称', key: 'exchangeName', align: 'left'},
    {title: '交换机类型', key: 'exchangeType', align: 'left', editor: {component: 'input'}},
    {title: '队列名称', key: 'queueName', align: 'left', editor: {component: 'input'}},
    {title: '绑定关系', key: 'binding', align: 'left', edit: false},
    {title: '是否死信队列', key: 'delayType', align: 'left', width: '150', editor: {component: 'input'}},
    {title: '乐观锁', key: 'version', align: 'left', editor: {component: 'input'}},
    {title: '是否删除', key: 'delFlag', align: 'left', editor: {component: 'input'}},
    {title: '记录状态', key: 'status', align: 'left', editor: {component: 'input'}},
    // { title: '创建人', key: 'createBy', align: 'left', edit: false },
    // { title: '创建时间', key: 'createTime', align: 'left', edit: false },
    {title: '修改人', key: 'updateBy', align: 'left', editor: {component: 'input'}},
    {title: '修改时间', key: 'updateTime', align: 'left', editor: {component: 'input'}},
    {title: '备注', key: 'remark', align: 'left', editor: {component: 'input'}},
    {
      title: '操作',
      align: 'center',
      slot: 'handleSlot',
    },
  ];
</script>
<style lang="scss" scoped></style>
